<script setup>
	import {
		ref,
		computed
	} from 'vue'
	// 导入组件
	import customPassword from './components/password.vue'
	import customMobile from './components/mobile.vue'
	// 标签页要展示的内容
	const tabMetas = [{
			title: '密码登录',
			subTitle: '验证码登录'
		},
		{
			title: '验证码登录',
			subTitle: '密码登录'
		},
	]
	// 标签页的索引值
	const tabIndex = ref(0)

	const tabMent = computed(() => {
		return tabMetas[tabIndex.value]
	})

	const onSubTable = () => {
		tabIndex.value = Math.abs(tabIndex.value - 1)
	}
</script>
<template>
	<view class="user-login">
		<view class="login-type">
			<view class="title">{{tabMent.subTitle}}</view>
			<view class="type" @click="onSubTable">
				<text>{{tabMent.title}}</text>
				<uni-icons color="#3c3e42" type="forward" />
			</view>

		</view>
		<customPassword v-if="tabIndex === 1"></customPassword>
		<customMobile v-if="tabIndex === 0"></customMobile>
	</view>
	<!-- 社交账号登录 -->
	<view class="social-login">
		<view class="legend">
			<text class="text">其它方式登录</text>
		</view>
		<view class="social-account">
			<view class="icon">
				<uni-icons color="#00b0fb" size="30" type="qq" />
			</view>
			<view class="icon">
				<uni-icons color="#fb6622" size="30" type="weibo" />
			</view>
			<view class="icon">
				<uni-icons color="#07C160" size="30" type="weixin" />
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.user-login {
		padding: 60rpx;
	}

	.login-type {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		line-height: 1;
		margin: 40rpx 0 80rpx;

		.title {
			font-size: 48rpx;
			color: #121826;
		}

		.type {
			color: #3c3e42;
			font-size: 30rpx;
			display: flex;
			align-items: center;
		}
	}

	.social-login {
		margin-top: 100rpx;
		padding: 0 60rpx;

		.legend {
			height: 40rpx;
			position: relative;
			border-top: 1rpx solid #ebebeb;
		}

		.text {
			position: absolute;
			top: -50%;
			left: 50%;

			font-size: 28rpx;
			color: #999;
			padding: 0 10rpx;
			background-color: #fff;
			transform: translate(-50%);
		}

		.social-account {
			display: flex;
			justify-content: space-evenly;
			margin-top: 40rpx;

			.icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				height: 80rpx;
				border-radius: 100rpx;
				background-color: #f6f6f6;
			}
		}
	}
</style>